<template>
  <div class="chart-item-container">
    <div v-if="loading"/>
    <div ref="weeklyExecutionChart" class="chart-item"/>
  </div>
</template>

<script setup name="WeeklyExecutionChart">
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
import useEcharts from '/@/utils/useEcharts';
import { usesStatisticsApi } from "/@/api/useAutoApi/statistics";
import * as echarts from 'echarts';

const loading = ref(true);
const weeklyExecutionChart = ref(null);
let chartInstance = null;
let data = reactive({
  weeks: [],
  api: { success: [], failure: [] },
  ui: { success: [], failure: [] }
});

// 初始化时从后端获取数据
const fetchWeeklyExecutionData = async () => {
  const fetchData = await usesStatisticsApi().getWeeklyExecutionData();
  Object.assign(data, fetchData.data);
};

const init = () => {
  const option = {
    legend: {
      data: ['API 成功', 'API 失败', 'UI 成功', 'UI 失败'],
      left: '10%'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: data.weeks, // 使用从后端获取的weeks数据
      axisLine: {
        show: true,
        lineStyle: {
          color: '#98A3B2',
          width: 1,
          type: 'solid',
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '总数',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#98A3B2',
          width: 1,
          type: 'solid',
        }
      },
      splitLine: { show: false }
    },
    series: [
      {
        name: 'API 成功',
        type: 'bar',
        stack: 'API',
        emphasis: { focus: 'series' },
        data: data.api.success,
        itemStyle: {
          color: '#91cc75',
        }
      },
      {
        name: 'API 失败',
        type: 'bar',
        stack: 'API',
        emphasis: { focus: 'series' },
        data: data.api.failure,
        itemStyle: {
          color: 'rgba(255, 70, 70, 0.8)'
        }
      },
      {
        name: 'UI 成功',
        type: 'bar',
        stack: 'UI',
        emphasis: { focus: 'series' },
        data: data.ui.success,
        itemStyle: {
          color: '#b094d9',
        }
      },
      {
        name: 'UI 失败',
        type: 'bar',
        stack: 'UI',
        emphasis: { focus: 'series' },
        data: data.ui.failure,
        itemStyle: {
          color: 'rgb(251,221,108)'
        }
      }
    ],
    grid: {
      top: '2%',
      left: '5%',
      right: '8%',
      bottom: '2%',
      containLabel: true,
    }
  };

  nextTick(() => {
    if (weeklyExecutionChart.value) {
      chartInstance = useEcharts(weeklyExecutionChart.value);

      try {
        chartInstance.setOption(option);
        loading.value = false;
      } catch (error) {
        console.error('设置option失败:', error);
      }
    }
  });
};

const updateChart = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

onMounted(async () => {
  await fetchWeeklyExecutionData();
  init();
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});

defineExpose({
  loading,
  weeklyExecutionChart,
  updateChart,
});
</script>

<style lang="scss" scoped>
.chart-item-container {
  margin-top: 10px;
  .chart-item {
    height: 30vh;
  }
}
</style>
